<template>
	<!-- 热门板块 -->
	<div class="echarts-header">
		<span>排名</span>
		<span>景区</span>
		<span>预约数量</span>
	</div>
	<div ref="echartsRef" class="echarts"></div>
</template>

<script setup lang="ts">
// Echarts 为init（dom元素后的类型）
// EChartsOption 为 option 的类型
import * as echarts from 'echarts';
import { ranking1, ranking2, ranking3, ranking4 } from '../assets/ranking-icon';
import { ref, onMounted } from 'vue';

const hotData = [
	{
		value: 79999,
		name: '峨眉山',
		percentage: '80%',
		maxValue: 100000,
	},
	{
		value: 59999,
		name: '稻城亚丁',
		percentage: '60%',
		maxValue: 100000,
	},
	{
		value: 49999,
		name: '九寨沟',
		percentage: '50%',
		maxValue: 100000,
	},
	{
		value: 39999,
		name: '万里长城',
		percentage: '40%',
		maxValue: 100000,
	},
	{
		value: 29999,
		name: '北京故宫',
		percentage: '30%',
		maxValue: 100000,
	},
];

const echartsRef = ref();

const colors = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];

const option = {
	grid: {
		top: '5%',
		left: '7%',
		right: '4%',
		bottom: '1%',
		containLabel: true,
	},
	xAxis: {
		type: 'value',
		axisLine: {
			show: false,
			lineStyle: {
				color: 'white',
			},
		},
		nameGap: 1,
		splitLine: {
			show: false,
		},
		axisTick: {
			show: false,
		},
		axisLabel: {
			show: false,
			fontSize: 16,
		},
		// boundaryGap: ["3%", "2%"],
		// splitNumber: 4,
		triggerEvent: false,
	},
	yAxis: [
		{
			show: true,
			data: hotData.map(val => val.name),
			inverse: true,
			axisLine: {
				show: false,
			},
			splitLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: '#fff',
				formatter: function (value: any) {
					let str = value.length > 6 ? value.slice(0, 6) + '...' : value;
					let index = hotData.map(item => item.name).indexOf(value) + 1;
					return ['{' + (index > 3 ? 'lg' : 'lg' + index) + '|NO.' + index + '}', '{title|' + str + '}'].join(' ');
				},
				rich: {
					lg1: {
						width: 60,
						backgroundColor: {
							image: ranking1,
						},
						color: '#fff',
						align: 'center',
						height: 20,
						fontSize: 13,
					},
					lg2: {
						width: 60,
						backgroundColor: {
							image: ranking2,
						},
						color: '#fff',
						align: 'center',

						height: 20,
						fontSize: 13,
					},
					lg3: {
						width: 60,
						backgroundColor: {
							image: ranking3,
						},
						color: '#fff',
						align: 'center',
						height: 20,
						fontSize: 13,
					},
					lg: {
						width: 60,
						backgroundColor: {
							image: ranking4,
						},
						color: '#fff',
						align: 'center',

						height: 20,
						fontSize: 13,
					},
					title: {
						width: 60,
						fontSize: 13,
						align: 'center',
						padding: [0, 10, 0, 15],
					},
				},
			},
			triggerEvent: false,
		},
		{
			show: true,
			inverse: true,
			data: hotData,
			axisLabel: {
				fontSize: 14,
				color: '#fff',
				// align: "right",
				margin: 20,
				formatter: (value: any) => {
					return value >= 10000 ? (value / 10000).toFixed(2) + 'w' : value;
				},
			},
			axisLine: {
				show: false,
			},
			splitLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			triggerEvent: false,
		},
	],
	series: [
		{
			name: '条',
			type: 'bar',
			yAxisIndex: 0,
			data: hotData,
			barWidth: 12,
			itemStyle: {
				borderRadius: 30,
				color: function (params: any) {
					let num = colors.length;
					return colors[params.dataIndex % num];
				},
			},
			label: {
				show: true,
				position: [12, 0],
				lineHeight: 14,
				color: '#fff',
				formatter: (params: any) => {
					return params.data.percentage;
				},
			},
		},
		{
			name: '框',
			type: 'bar',
			yAxisIndex: 1,
			data: hotData.map(val => {
				if (!val.maxValue) {
					return 5;
				}
				return val.maxValue;
			}),
			barWidth: 18,
			itemStyle: {
				color: 'none',
				borderColor: '#00c1de',
				borderWidth: 1,
				borderRadius: 15,
			},
			silent: true,
		},
	],
};
onMounted(() => {
	const myEcharts = echarts.init(echartsRef.value as HTMLElement);
	myEcharts.setOption(option);
});
</script>
<style lang="scss" scoped>
.echarts {
	width: 100%;
	height: calc(100% - 56px);
}
.echarts-header {
	box-sizing: border-box;
	display: flex;
	height: 36px;
	margin: 10px 10px 0;
	line-height: 36px;
	background: url('../images/rankingChart-bg.png') no-repeat;
	background-size: 100% 100%;
	span {
		width: 18%;
		margin-left: 4px;
		font-size: 14px;
		font-weight: bold;
		color: #fdbc52;
		text-align: center;
		&:nth-child(2) {
			margin-left: 4px;
		}
		&:last-child {
			width: 20%;
			margin-left: 60px;
		}
	}
}
</style>
